<%--
  Author: Al-assad 余林颖
  E-mail: yulinying_1994@outlook.com
  Date: 2018/1/11 20:29 
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Ajax 测试页面</title>
    <script src="<c:url value="/resources/js/jquery-3.1.min.js"/>" ></script>

    <script type="text/javascript">
        $(document).ready(function(){

            //监听userId输入框添的更改时间，加入Ajax方法
            $("#userIdInput").change(function(){
                var userId = $(this).val().trim();

                if(userId !== "" && userId !== null && userId !== undefined ){
                    $.ajax({
                        url : "<c:url value="/getUserAjax"/>",
                        type : "GET",
                        headers: {
                            Accept : "application/json;charset=utf-8"   //设置响应正文格式类型为 json
                        },
                        data : {"userId": userId},
                        success : function(resData){
                            if(resData.userId !== undefined){
                                $("#message").text(
                                      "User Id :" + resData.userId+"\n"
                                    + "User Name: " + resData.userName + "\n"
                                    + "User Age: "+ resData.age + "\n"
                                );
                            }else{
                                $("#message").text("不存在该用户");
                            }
                        },
                        error : function(resData,status){
                            $("message").text("Ajax 请求错误");
                        }
                    });
                }
            });
        });
    </script>

</head>
<body>
<h1> 实时显示用户信息 </h1>
<label>Input User Id </label><input id="userIdInput" type="text" name="userId" />
<pre id="message"></pre>
</body>
</html>
